<script setup lang="ts">
import {ShallowRef} from "vue";
import {TresControl, TresScene} from "@tresjs/core/dist/src/types";
import {Camera} from "three";

import ConfigToolSave from "./ConfigToolSave.vue";
import ConfigToolWallShow from "./ConfigToolWallShow.vue";
import ConfigToolTexture from "./ConfigToolTexture.vue";
import ConfigToolImportModel from "./ConfigToolImportModel.vue";
import ConfigToolSpawnPoint from "./ConfigToolSpawnPoint.vue";

const textureDialogShow = ref(false);
const importModelDialogShow = ref(false);

const injectScene = inject<ShallowRef<TresScene>>('scene')!
const injectCamera = inject<ShallowRef<Camera>>('camera')!
const injectControls = inject<ShallowRef<TresControl>>('controls')!

</script>

<template>
  <ConfigToolSave />

   <el-collapse class="collapse mt-4">
    <el-collapse-item title="导入素材">
      <el-space>
        <ConfigToolImportModel v-model="importModelDialogShow" />
        <!--      <el-button type="primary">导入纹理 / 贴图</el-button>-->
      </el-space>
    </el-collapse-item>
    <el-collapse-item title="显示墙体">
      <ConfigToolWallShow />
    </el-collapse-item>
    <el-collapse-item title="其他操作">
      <el-space>
        <ConfigToolTexture />
        <ConfigToolSpawnPoint />
      </el-space>
    </el-collapse-item>
  </el-collapse>

</template>

<style scoped lang="scss">
.collapse {
  --el-collapse-header-font-size: 16px
}
</style>
